import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text, Input, Button } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime } from "../../utils/common";
import cash_nowStyleSheet from "./cash_now_styles";

// import icon_83 from "../../assets/img/icon_83.png";
import icon_84 from "../../assets/img/icon_84.png";
import icon_84_on from "../../assets/img/icon_84_on.png";
import icon_85 from "../../assets/img/icon_85.png";
var _styleSheet = cash_nowStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Cash = class Cash extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cashType: 2,
      items: [],
      currentBankNo: null,
      cardName: '',
      cardNumber: '',
      bankCode: '',
      amount: 0,
      serviceMoney: {},
      userInfo: {}
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '立即提现' });
    this.getUserCards();
    this.getCashService();
    this.setState({
      userInfo: getRuntime().getUserInfo()
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  changeCashType(cashType) {
    this.setState({
      cashType
    });
  }
  getCashService() {
    let { userStore } = this.props.stores;
    userStore.getCashService({
      callback: res => {
        this.setState({ serviceMoney: res });
      }
    });
  }
  getUserCards() {
    let { userStore } = this.props.stores;
    userStore.getUserCards({
      callback: res => {
        this.setState({
          items: toJS(res.items)
        });
      }
    });
  }
  changeBank(item) {
    this.setState({
      currentBankNo: item.id,
      cardName: item.cardName,
      cardNumber: item.cardNumber,
      bankCode: item.bankCode
    });
  }
  // 截取银行卡后四位
  getPartBankNo(bankNo) {
    if (bankNo.length < 5) {
      return bankNo;
    }
    return bankNo.substr(-4);
  }
  setAmount() {
    this.setState({ amount: this.state.userInfo.commision });
  }
  inputChange(e) {
    this.setState({ amount: e.detail.value });
  }
  // 提现
  submit() {
    let { amount, cardName, cardNumber, bankCode, userInfo } = this.state;
    if (!amount) {
      getRuntime().showToast('请填写提现金额~');
      return;
    }
    if (amount > userInfo.commision) {
      getRuntime().showToast('您的余额不够~');
      return;
    }
    if (!cardName || !cardNumber || !bankCode) {
      getRuntime().showToast('请选择银行卡~');
      return;
    }
    let { userStore } = this.props.stores;
    userStore.cash({
      form: {
        cardName,
        cardNumber,
        bankCode,
        amount
      },
      callback: res => {
        // console.log(res)
        getRuntime().wxPay(JSON.parse(res.payParams), () => {
          getRuntime().showToast('提现成功~');
          setTimeout(() => {
            getRuntime().navigateTo('/pages/user/cash_success');
          }, 2000);
        });
      }
    });
  }
  render() {
    let { cashType, items, currentBankNo, serviceMoney, userInfo, amount } = this.state;
    let commision = userInfo.commision;
    let service = (commision * serviceMoney.value).toFixed(2);
    return <View style={_styleSheet["my-my_cash_now"]}>

       <View style={_styleSheet["header"]}>
         <View style={_styleSheet["list-desc"]}>请输入提现金额（元）</View>
         <View style={_styleSheet["input-group"]}>
           <Input name="amount" type={"number"} onChange={this.inputChange.bind(this)} placeholderClass="placeholder_class" placeholder="￥0.00" style={_styleSheet["from-input"]} />
         </View>
         {amount && <View style={_styleSheet["info"]}>
              额外扣除{service}元手续费<Text style={[_styleSheet["color"], _styleSheet["color-orange"]]}>(费率{serviceMoney['value']}%)</Text>
           </View>}
         {!amount && <View style={_styleSheet["info"]}>
              当前收益余额{commision}元，<Text onClick={this.setAmount.bind(this)} style={_styleSheet["color"]}>全部提现</Text>
           </View>}
       </View>

        <View style={_styleSheet["type-item"]}>
         
          <View onClick={this.changeCashType.bind(this, 2)} style={_styleSheet["item"]}>
            <Image src={icon_85} style={_styleSheet["type-icon"]} />
            <View style={_styleSheet["list-title"]}>银行卡</View>
            
          </View>

          <View style={_getStyle(cashType === 2 ? 'item-sub item-sub-on' : 'item-sub')}>
            {items && items.map(item => {
            return <View onClick={this.changeBank.bind(this, item)} style={_styleSheet["op"]}>
                    <View style={_styleSheet["list-title"]}>{item.bankName}（{this.getPartBankNo(item.cardNumber)}）</View>
                    {currentBankNo === item.id && <Image src={icon_84} style={_styleSheet["check-icon"]} />}
                    {currentBankNo !== item.id && <Image src={icon_84_on} style={_styleSheet["check-icon"]} />}
                  </View>;
          })}
            <View onClick={this.handelRouter.bind(this, '/pages/user/bank_card_add')} style={_styleSheet["op"]}>
              <View style={_styleSheet["list-title"]}>+ 使用新卡提现</View>
            </View>
          </View>
        </View>
       <View style={_styleSheet["from-wrap"]}>
         <Button formType={"submit"} onClick={this.submit.bind(this)} style={_styleSheet["btn-line-submit"]}>确认提现</Button>
         <View style={_styleSheet["submit-preview"]}>预计4小时内到账</View>
       </View>
      </View>;
  }
};
Cash = tslib_1.__decorate([inject("stores"), observer], Cash);
export default Cash;